<template>
  <div>
    <div class="collection fL w100">
      <div class="layout">
        <div class="left_mulist">
          <ul class="my_coll">
            <router-link to="/user"><li>最近播放</li></router-link>
            <li class="active">我的收藏</li>
            <li>已购歌曲</li>
            <li>关注歌手</li>
            <li>消费记录</li>
            <li>账号设置</li>
          </ul>
        </div>
        <div class="right_mulist">
          <div class="mypanes">
            <div>
              <h2 class="soll_tit">最近播放</h2>
            </div>

            <div style="display: block">
              <h2 class="soll_tit">我的收藏</h2>
              <table class="song-label">
                <tr>
                  <th width="5%">#</th>
                  <th width="43%">歌曲</th>
                  <th width="26%">歌手</th>
                  <th width="26%">时长</th>
                </tr>
                <tr>
                  <td>01</td>
                  <td>像我这样的人</td>
                  <td>摩登兄弟</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>02</td>
                  <td>因为爱情</td>
                  <td>吴青峰</td>
                  <td>04:21</td>
                </tr>
                <tr class="active">
                  <td>03</td>
                  <td>小王</td>
                  <td>毛不易</td>
                  <td>
                    <div class="cz_song">
                      <button class="zp_a"></button>
                      <button class="zp_b"></button>
                      <button class="zp_c hover"></button>
                      <button class="zp_d"></button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>04</td>
                  <td>那时的我们</td>
                  <td>毛不易</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>05</td>
                  <td>一江水</td>
                  <td>刘欢</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>06</td>
                  <td>像我这样的人</td>
                  <td>摩登兄弟</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>07</td>
                  <td>因为爱情</td>
                  <td>吴青峰</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>08</td>
                  <td>小王</td>
                  <td>毛不易</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>09</td>
                  <td>那时的我们</td>
                  <td>毛不易</td>
                  <td>04:21</td>
                </tr>
                <tr>
                  <td>10</td>
                  <td>一江水</td>
                  <td>刘欢</td>
                  <td>04:21</td>
                </tr>
              </table>
              <div class="page_cent">
                <button><</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>...</button>
                <button>142</button>
                <button>></button>
              </div>
            </div>

            <div>
              <h2 class="soll_tit">已购歌曲</h2>
            </div>

            <div>
              <h2 class="soll_tit">关注歌手</h2>
              <ul class="follow_singer">
                <li>
                  <img src="images/c01.png" />
                  <p>叶欢</p>
                  <button>取消关注</button>
                </li>
                <li>
                  <img src="images/c02.png" />
                  <p>闵惠芬</p>
                  <button>取消关注</button>
                </li>
                <li>
                  <img src="images/c03.png" />
                  <p>王品</p>
                  <button class="active">关注</button>
                </li>
                <li class="magnone">
                  <img src="images/c04.png" />
                  <p>赵葆秀</p>
                  <button>取消关注</button>
                </li>
                <li>
                  <img src="images/c01.png" />
                  <p>叶欢</p>
                  <button>取消关注</button>
                </li>
                <li>
                  <img src="images/c02.png" />
                  <p>闵惠芬</p>
                  <button>取消关注</button>
                </li>
                <li>
                  <img src="images/c03.png" />
                  <p>王品</p>
                  <button>取消关注</button>
                </li>
                <li class="magnone">
                  <img src="images/c04.png" />
                  <p>赵葆秀</p>
                  <button>取消关注</button>
                </li>
              </ul>
              <div class="page_cent">
                <button><</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>...</button>
                <button>142</button>
                <button>></button>
              </div>
            </div>

            <div>
              <h2 class="soll_tit">消费记录</h2>
              <ul class="record">
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="rgt_moy fR">
                      <b>¥88.00</b>
                      <font>支付成功</font>
                    </div>
                  </div>
                </li>
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="fR rgt_moy">
                      <b>¥88.00</b>
                      <div>
                        <button>立即支付</button>
                        <a href="###">取消订单</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                    <a href="###"></a>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="fR rgt_moy">
                      <b>¥88.00</b>
                      <span>已关闭</span>
                    </div>
                  </div>
                </li>
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="rgt_moy fR">
                      <b>¥88.00</b>
                      <font>支付成功</font>
                    </div>
                  </div>
                </li>
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="fR rgt_moy">
                      <b>¥88.00</b>
                      <div>
                        <button>立即支付</button>
                        <a href="###">取消订单</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <h2>
                    订单编号：10293008
                    <span>2019-04-30 11:29:05</span>
                    <a href="###"></a>
                  </h2>
                  <div>
                    <img src="images/d01.png" />
                    <div class="lf_txt">
                      <h4>幸福指南</h4>
                      <span>演唱：品冠</span>
                    </div>
                    <div class="fR rgt_moy">
                      <b>¥88.00</b>
                      <span>已关闭</span>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="page_cent">
                <button><</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>...</button>
                <button>142</button>
                <button>></button>
              </div>
            </div>

            <div>
              <h2 class="soll_tit">
                账号设置
                <a class="fR" href="###">修改密码</a>
              </h2>
              <div class="settings">
                <a href="###"><img src="images/zh_img.png" /></a>
                <div>
                  <label>用户名：</label>
                  <input placeholder="李雨晴" />
                </div>
                <p>手机号：&nbsp;&nbsp;135****8765</p>
                <button class="btn_sty">修改</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
  name: 'Recently',
  data() {
    return {
      updtelist: [],
    }
  },

  components: {
    Header,
    Footer,
  },

  computed: {},

  methods: {
    getUpdate() {
      this.$axios
        .get(`http://localhost:3000/toplist/artist?type=1`)
        .then(res => {
          //标签
          console.log('请求成功了', res.data.list.artists)
          // console.log(updata)
          this.$bus.$emit('getUpdate', res.data.list.artists)
        })
    },
  },
  mounted() {
    this.$bus.$on('getUpdate', updtelist => {
      console.log('我是Song组件 收到了数据:', updtelist)
      this.updtelist = updtelist
    })
  },
}
</script>
<style lang="css" scoped></style>
